<!-- 动态表单展示 -->
<template>
  <div :class="preview">
    <img
      v-if="resData.formCover"
      :src="resData.formCover"
      style="width: 100%; height: auto"
    />
    <el-form
      class="pa-15 customForm"
      style="overflow: hidden"
      :class="{ isDisabled: formConf.disabled }"
      :size="formConf.size"
      :label-position="formConf.labelPosition"
      :disabled="formConf.disabled"
      :label-width="formConf.labelWidth + 'px'"
      :ref="formConf.formModel"
      :model="formData"
      :rules="rules"
    >
      <el-row :gutter="formConf.gutter">
        <draggable-item
          v-for="(element, index) in drawingList"
          :key="element.renderKey"
          :drawing-list="drawingList"
          :element="element"
          :index="index"
          :form-conf="formConf"
          @onInput="handChange"
        />
      </el-row>
    </el-form>
    <div class="tc py-20 px-15" v-if="formConf.formBtns">
      <el-button
        type="primary"
        @click="submitForm"
        style="width: 100%"
        size="medium"
        >{{ formConf.formBtnsText }}</el-button
      >
    </div>


    <el-dialog
      title=""
      :visible.sync="dialogVisible"
      append-to-body
      fullscreen
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
    >
      <div style="height: calc(100vh - 180px)" class="disFlxCC">
        <div>
          <img
            src="@/assets/images/formSuccess.png"
            style="width: 80px; height: auto"
          />
          <div class="fz-16 color3 fw-6 tc linh-50 pt-20">{{query.isEdit ? '修改成功' : '提交成功'}}</div>
          <div class="tc pt-10">
            <!-- <el-button
              type="primary"
              size="mini"
              @click="coloseWindow"
              >立即返回</el-button
            > -->
            <div v-if="resData.writeLimit === 1 || query.isEdit"></div>
            <el-button type="primary" size="mini" @click="resetForm" v-else
              >再填一次</el-button
            >
          </div>
        </div>
      </div>
      <!-- <span>填写成功</span>
      <span slot="footer" class="dialog-footer">
      </span> -->

    </el-dialog>

    <mapDialog :visible.sync="mapShow" @handelAddress="locationSure" />
  </div>
</template>

<script>
import draggable from "vuedraggable";
import DraggableItem from "./DraggableItem";
import mapDialog from "@/components/IbsAmap/mapDialog.vue";
import { isArray } from "@/utils/is.js";
import {
  getFormDetail,
  submitForm,
  recordDetail,
  recordUpdateDetail,
} from "@/api/customForm/customForm";
import { makeUpJs } from "./js";
export default {
  components: {
    draggable,
    DraggableItem,
    mapDialog
  },
  computed: {
    preview(){
      return this.$route.query.preview || ""
    },
    mapShow(){
      return this.$store.state.customForm.mapShow
    }
  },
  data() {
    return {
      query: {},
      resData: {},
      formConf: {},
      drawingList: [],

      formData: {},
      rules: {},
      dialogVisible: false,
    };
  },
  methods: {
    // 获取表单模板
    async getForm() {
      // 查看或编辑回显
      let res = "";
      if (this.query.recordId) {
        let params = {
          recordId: this.query.recordId,
        };
        res = await recordDetail(params);
      } else {
        let params = {
          formId: this.query.formId,
        };
        res = await getFormDetail(params);
      }

      document.title = res.data.formTitle;
      this.resData = res.data;

      const formContent = JSON.parse(
        res.data[this.query.recordId ? "recordContent" : "formContent"]
      );
      this.drawingList = formContent.drawingList;
      this.formConf = formContent.formConf;
      // 查看详情-禁用
      if (this.query.recordId && !this.query.isEdit) {
        this.resData.formCover = "";
        this.formConf.disabled = true;
        this.formConf.formBtns = false;
      }
      console.log(JSON.parse(JSON.stringify(formContent.drawingList)));
      // 屏幕过大,双列显示
      if (window.innerWidth > 750 && !this.preview) {
        this.drawingList.forEach((v) => {
          if (v.layout !== "rowFormItem") {
            v.span = 12;
          }
        });
      }
      const params = {
        fields: JSON.parse(JSON.stringify(this.drawingList)),
        ...this.formConf,
      };
      const { formData, rules } = makeUpJs(params, "file");
      this.formData = formData; // 获取表单对象
      this.rules = rules; // 获取表单验证规则
      console.log(this.rules,'表单验证');
      console.log('如果出现required为true但是未生成校验规则,请查看generator/config.js的trigger是否配置');
    },
    // 获取数据回显

    // 表单值变化
    handChange(e) {
      const { value, vModel } = e;
      this.formData[vModel] = value;
    },
    locationSure(e){
      this.formData[this.$store.state.customForm.vModel] = e.address
      this.drawingList.forEach(v=>{
        if(v.vModel === this.$store.state.customForm.vModel){
          this.$set(v, "defaultValue", e.address);
        }
      })
    },
    // 提交表单
    submitForm() {
      console.log(this.$refs);
      console.log(JSON.parse(JSON.stringify(this.formData)));
      this.$refs[this.formConf.formModel].validate((valid) => {
        if (valid) {
          let params = {
            formId: Number(this.query.formId),
            userType: Number(this.query.userType),
            collectUserid: Number(this.query.collectUserid),
            userName: this.formData.userName,
            recordContent: {
              drawingList: this.drawingList,
              formConf: this.formConf,
            },
          };
          params.recordContent = JSON.stringify(params.recordContent);
          if (this.query.recordId) {
            // 更新表单
            params.recordId = this.query.recordId;
            recordUpdateDetail(params).then((res) => {
              this.dialogVisible = true;
            });
          } else {
            // 填写表单提交
            submitForm(params).then((res) => {
              this.dialogVisible = true;
            });
          }
        } else {
          return false;
        }
      });
    },
    // 再填一次
    resetForm() {
      this.$refs[this.formConf.formModel].resetFields();
      const formContent = JSON.parse(this.resData["formContent"]);
      this.drawingList = formContent.drawingList;
      this.dialogVisible = false;
    },
    // 关闭窗口
    coloseWindow() {
      var userAgent = navigator.userAgent;
      if (userAgent.indexOf("MSIE") > 0) {
        if (userAgent.indexOf("MSIE 6.0") > 0) {
          window.opener = null;
          window.close();
        } else {
          window.open("", "_top");
          window.top.close();
        }
      } else if (
        userAgent.indexOf("Firefox") != -1 ||
        userAgent.indexOf("Chrome") != -1
      ) {
        window.location.href = "about:blank "; //火狐默认状态非window.open的页面window.close是无效的
        //window.history.go(-2);
      } else {
        window.opener = null;
        window.open("about:blank", "_self");
        window.close();
      }
    },
  },
  created() {
    this.query = this.$route.query;
    this.getForm();
  },
};
</script>
<style scoped>
.mobileView{
  max-width: 375px;
  height: 80vh;
  margin: auto;
  border: solid 1px #999;
  border-radius: 10px;
  overflow-x: hidden;
  position: relative;
  top: 10vh;
}
.widthAuto >>> .el-upload--picture-card,
.widthAuto >>> .el-upload-list__item {
  width: 100% !important;
  height: auto !important;
}

.widthAuto >>> .el-upload-list__item,
.widthAuto >>> .el-list-enter-active,
.widthAuto >>> .el-list-leave-active {
  transition: none !important;
}

.el-form.el-form--label-top >>> .el-form-item__label {
  padding-bottom: 0;
  line-height: 30px;
}
.el-form >>> .el-form-item {
  margin-bottom: 10px;
}
.el-form >>> .el-form-item.is-error {
  margin-bottom: 22px;
}
.limitHide >>> .el-upload.el-upload--picture-card,
.isDisabled >>> .el-upload-list__item-status-label,
.isDisabled >>> .el-upload-list__item-actions,
.isDisabled >>> .el-upload--picture-card {
  display: none !important;
}
</style>
